<template>
    <div>
      <p>{{fei}}</p>
      <h4>商品信息</h4>
      <table class="table table-hover table-bordered">
        <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for='(shop,index) in shopList' :key='index'>
          <td>{{shop.id}}</td>
          <td>{{shop.name}}</td>
          <td>{{shop.price}}</td>
          <td>
            <div class="btn btn-info" @click="add(shop)">购物车</div>
          </td>
        </tr>
        </tbody>
      </table>

      <h4>已选商品</h4>
      <table class="table table-hover table-bordered">
        <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for = '(shop,index) in cartProducts'>
          <td>{{shop.id}}</td>
          <td>{{shop.name}}</td>
          <td>{{shop.price}}</td>
          <td>{{shop.num}}</td>
          <td>
            <!---->
            <div @click="remove(shop)" class="btn btn-danger btn-sm">删除</div>
            <button @click="jia(index)">+</button>
            <button @click="jian(index)">-</button>
          </td>
        </tr>
        <tr v-if="!cartProducts.length">
          <td colspan="5" class="text-center">您的购物车空空如也。。。</td>
        </tr>
        </tbody>
      </table>

      <!--总价 总数-->
      <div class="item-wrapper">
        <div class='item'>总数：<strong>{{totalNum}}</strong></div>
        <div class='item'>总价：<strong>{{totalPrice}}</strong></div>
        <div class="item btn btn-danger" @click='clearAllCart'>清空购物车</div>
      </div>
    </div>
</template>

<script>
  import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
    export default {
        name: "product",
        data(){
          return {
            fei:'123456',
          }
        },
        computed:{
          ...mapState(['count','list']),
          ...mapGetters(['shopList','cartProducts','totalNum','totalPrice'])
        },
        methods:{
          ...mapActions(['actionAdd','actionRemove']),
          ...mapMutations(['add','remove','clearAllCart','jia','jian'])
        }
    }
</script>

<style scoped>
  .table-shop > th {
    text-align: center;
  }

  .item-wrapper {
    display: flex;
    background-color: #dfdfdf;
    align-items: center;
    justify-content: center;
  }

  .item {
    flex: 1;
  }
</style>
